/**
 * @desc 柱图
 * */
import React, {Component} from 'react';
import echarts from 'echarts';

class TheFunnelChart extends Component {
    componentDidMount() {
        const myChartFunnel = echarts.init(this.funnelChart);
        const colors = ['#FF698F', '#7D8DFE', '#4CD5E7'];
        let lineargroup = this.props.linearGroup

        let data1 = [];
        let data2 = [];
        lineargroup.forEach((v, i) => {
            let obj1 = {
                value: lineargroup[i].value,
                num: lineargroup[i].number,
                name: lineargroup[i].oriname
            };

            let obj2 = {
                value: lineargroup[i].value,
                name: lineargroup[i].name,
                itemStyle: {
                    opacity: 0,
                },
            };
            data1.push(obj1);
            data2.push(obj2);
        })

        myChartFunnel.setOption({
            color: colors,
            series: [{
                top: 0,
                type: 'funnel',
                minSize: '60',
                maxSize: '200',
                width: '200',
                gap: 10,
                label: {
                    show: true,
                    position: 'inside',
                    fontSize: '10',
                    formatter: function (d) {
                        let ins = d.name + '{aa|}\n' + d.data.num.toLocaleString();
                        return ins
                    },
                    rich: {
                        aa: {
                            padding: [8, 0, 6, 0]
                        }
                    }
                },
                data: data1
            },
                {
                    top: 0,
                    type: 'funnel',
                    minSize: '60',
                    maxSize: '200',
                    width: '200',
                    gap: 10,
                    z: 2,
                    label: {
                        normal: {
                            color: '#333',
                            position: 'right',
                            formatter: function (d) {
                                let ins = '{aa|' + d.name + '}\n{bb|' + d.percent + '%}';
                                return ins
                            },
                            rich: {
                                aa: {
                                    align: 'center',
                                    color: '#666',
                                    fontSize: '10',
                                    lineHeight: '30'
                                },
                                bb: {
                                    align: 'center',
                                    color: '#333',
                                    fontSize: '14'
                                }
                            }
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data2
                }
            ]
        })
    }

    componentWillUnmount() {
        window.removeEventListener('resize', function () {

        }, false)
    }

    render() {
        return <div ref={ref => this.funnelChart = ref} id="funnelChart" style={{width: '100%', height: '200px'}}/>
    }
}

export default TheFunnelChart